<%@page contentType="text/html;charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>我的好友</title>
<link rel="icon" href="../favicon.ico" type="image/ico">
<link href="${base}/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${base}/css/style.min.css" rel="stylesheet">
<link href="${base}/css/animate.css" rel="stylesheet">
  <style>
    #box{

    }
    img{
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  </style>
</head>
  
<body>
<div class="topbar" style="background-color: deepskyblue;opacity: 0.5">
  <div class="topbar-left">
    <div class="lyear-aside-toggler">
    </div>
    <span class="navbar-page-title" style="margin-left: 80px"> <h3 style="color: black">我的好友</h3> </span>
  </div>
  <ul class="topbar-right">
    <li class="dropdown dropdown-profile">
      <img style="display: inline-block" class="img-avatar img-avatar-48 m-r-10" src="${base}/upload/${theUser.headpic}" />
      <span style="color: crimson">${theUser.name}</span>
      <a style="display: inline-block;color: black" href="${base}/toHome">回到首页</a>
    </li>
  </ul>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12" style="background-image: url(${base}/img/444.jpg);background-size: 120%" >
      <div class="card" style="width: 1200px;height: 800px;margin-left:auto;margin-right:auto;opacity: 0.9" >
        <div>
          <form  method="post" action="${base}/friends/selectAllfs" >
            <div class="input-group" >
              <input type="text" class="form-control" value="" name="likes" placeholder="请输入电话"
                     style="width: 230px;margin-top: 20px;margin-left: 25px; ">
                <button class="btn btn-cyan btn-w-md" type="submit" style="margin-top: 20px;width: 100px"
                >搜索</button>
                <input type="hidden"  id="search-field" value="title">
            </div>
          </form>
        </div>
        <div class="card-toolbar clearfix">
          <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" href="${base}/friends/selectFriends"><i class="mdi mdi-plus"></i> 添加好友</a>
            <a class="btn btn-primary m-r-5" onclick="deleteAll()"></i> 批量删除</a>
            <a class="btn btn-primary m-r-5" onclick="laheifr()"></i> 批量拉黑</a>
            <a class="btn btn-danger" href="${base}/friends/selecthmd">我的黑名单</a>
            <a class="btn btn-primary m-r-5" href="${base}/information/selectAllInfs"> 收件箱</a>
            <a class="btn btn-primary m-r-5" href="${base}/information/selectAllInfsByMy"> 发件箱</a>
            <a class="btn btn-primary m-r-5" href="${base}/information/selectLjx"></i>垃圾箱</a>
          </div>
        </div>

        <div class="card-body">

          <div class="table-responsive">
            <form action="" method="post" id="form3">
            <table class="table table-bordered">
              <thead>
              <tr>
                <th>
                  <label class="lyear-checkbox checkbox-primary">
                    <input type="checkbox" id="check-all"><span></span>
                  </label>
                </th>
                <th>头像</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>手机</th>
                <th>性别</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <c:forEach var="f" items="${p.list}">
              <tr>
                <td>
                  <label class="lyear-checkbox checkbox-primary">
                    <input type="checkbox" name="cks" value="${f.id}"><span></span>
                  </label>
                </td>
                <td><img src="${base}/upload/${f.headpic}" alt=""></td>
                <td>${f.account}</td>
                <td>${f.name}</td>
                <td>${f.phone}</td>
                <td>${f.sex eq 1?"男":"女"}</td>
                <td>
                  <div id="${f.id}" hidden style="z-index: 10;position: fixed;padding: 20px;width: 600px;height: 400px;
                       background-color:wheat;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 4px;box-shadow: 2px 2px 4px rgba(0,0,0,.2);
                        transition: hidden 0.3s linear;">
                    <h3>发送信息给：${f.name}</h3>
                    <p align="right">
                      <button onclick="box.hidden = true">x</button>
                    </p>
                    <input type="hidden" value="${f.id}" name="accept">
                    <p>标题：<input type="text" name="title" ></p>
                    <p>内容：<textarea cols="40" rows="8" name="content"></textarea></p>
                    <p style="margin-left: 250px"><a href="#" onclick="(function() {
                            lightyear.loading('show');
                            setTimeout(function () {
                            lightyear.loading('hide');
                            lightyear.notify('信息已发送~', 'success', 1000);
                            }, 0)
                            setTimeout(function() {
                            $('#form3').attr('action','${base}/information/addInformation?accepts=${f.id}');
                            $('#form3').submit();
                            },500)
                            })()">提交</a>

                  </div>
                  <div class="btn-group">
                    <div class="btn-group btn-group-round">
                      <a class="btn btn-default" onclick="(function() {
                            var modal = document.getElementById('${f.id}');
                              modal.hidden = false;
                      })()">发信息</a>
                      <a class="btn btn-default"
                         onclick="(function() {
                              lightyear.loading('show');
                              setTimeout(function () {
                              lightyear.loading('hide');
                              lightyear.notify('已删除~', 'success', 1000);
                              }, 0)
                              setTimeout(function() {
                              $('#form3').attr('action','${base}/friends/deleteFriend?acceptid=${f.id}');
                              $('#form3').submit();
                              },500)
                              })()">删  除</a>
                      <a class="btn btn-default"
                         onclick="(function() {
                                 lightyear.loading('show');
                                 setTimeout(function () {
                                 lightyear.loading('hide');
                                 lightyear.notify('已拉黑~', 'success', 1000);
                                 }, 0)
                                 setTimeout(function() {
                                 $('#form3').attr('action','${base}/friends/laheifr?userid=${f.id}');
                                 $('#form3').submit();
                                 },500)
                                 })()"
                      >拉  黑</a>
                    </div>
                  </div>
                </td>
              </tr>
              </c:forEach>
              </tbody>
            </table>
            </form>


          </div>
          <ul class="pagination">
            <li><a href="${base}/friends/selectAllfs?pageNum=1&likes=${likes}">«</a></li>
            <li><a href="${base}/friends/selectAllfs?pageNum=${p.prePage}&likes=${likes}">上一页</a></li>
            <c:forEach var="i" items="${p.navigatepageNums}">
              <li <c:if test="${i eq p.pageNum}">class="active"</c:if>><a
                      href="${base}/friends/selectAllfs?pageNum=${i}&likes=${likes}">${i}</a></li>
            </c:forEach>
            <li><a href="${base}/friends/selectAllfs?pageNum=${p.nextPage}&likes=${likes}">下一页</a></li>
            <li><a href="${base}/friends/selectAllfs?pageNum=${p.pages}&likes=${likes}">»</a></li>
          </ul>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${base}/js/main.min.js"></script>
<script src="${base}/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${base}/js/lightyear.js"></script>
<script type="text/javascript">
  $(function(){
      $('.search-bar .dropdown-menu a').click(function() {
          var field = $(this).data('field') || '';
          $('#search-field').val(field);
          $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
      });
  });
  function openModal(){

  }

  function deleteAll() {
    $("#form3").attr("action","${base}/friends/deleteAll");
    $("#form3").submit();
  }
  function laheifr() {
    $("#form3").attr("action","${base}/friends/laheiAll");
    $("#form3").submit();
  }
</script>
</body>
</html>